import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {nanoid} from 'nanoid'

import './index.css'
export default class Header extends Component {
  
  
  static propTypes = {
    getListData:PropTypes.func.isRequired
  }


  handleKeyUp = (event)=>{

    const {keyCode,target} = event
    const v = target.value.trim()
    if(keyCode===13){
      if(v !== ''){
        const todoid = nanoid()
        //console.log(target.value,keyCode)
        const todoObj = {id:todoid,name:v,done:false}
        this.props.getListData(todoObj)
        target.value = ''
      }else{
        alert('写点什么~~')
      }
      
    }
    
  }
  render() {
    
    return (
      <div className="todo-header">
        <input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
      </div>
    )
  }
}
